// import { useCallback, useEffect, useRef, useState } from "react";
// import { createFileRoute } from "@tanstack/react-router";

// export const Route = createFileRoute("/transformer")({
//   component: TransformComponent,
// });

// function TransformComponent() {
//   const worker = useRef<Worker | null>(null);

//   // Model loading
//   const [ready, setReady] = useState(false);
//   const [disabled, setDisabled] = useState(false);
//   const [progressItems, setProgressItems] = useState([]);

//   // Inputs and outputs
//   const [input, setInput] = useState("I love walking my dog.");
//   const [sourceLanguage, setSourceLanguage] = useState("eng_Latn");
//   const [targetLanguage, setTargetLanguage] = useState("fra_Latn");
//   const [output, setOutput] = useState("");

//   const translate = () => {
//     setDisabled(true);
//     worker?.current?.postMessage({
//       text: input,
//       src_lang: sourceLanguage,
//       tgt_lang: targetLanguage,
//     });
//   };

//   const onTranslate = useCallback((e) => {}, []);

//   // We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
//   useEffect(() => {
//     if (!worker.current) {
//       // Create the worker if it does not yet exist.
//       worker.current = new Worker(new URL("./worker.js", import.meta.url), {
//         type: "module",
//         name: "TranslateWorker",
//       });
//     }

//     // Create a callback function for messages from the worker thread.
//     const onMessageReceived = (e) => {
//       switch (e.data.status) {
//         case "initiate":
//           // Model file start load: add a new progress item to the list.
//           setReady(false);
//           setProgressItems((prev) => [...prev, e.data]);
//           break;

//         case "progress":
//           // Model file progress: update one of the progress items.
//           setProgressItems((prev) =>
//             prev.map((item) => {
//               if (item.file === e.data.file) {
//                 return { ...item, progress: e.data.progress };
//               }
//               return item;
//             }),
//           );
//           break;

//         case "done":
//           // Model file loaded: remove the progress item from the list.
//           setProgressItems((prev) =>
//             prev.filter((item) => item.file !== e.data.file),
//           );
//           break;

//         case "ready":
//           // Pipeline ready: the worker is ready to accept messages.
//           setReady(true);
//           break;

//         case "update":
//           // Generation update: update the output text.
//           setOutput(e.data.output);
//           break;

//         case "complete":
//           // Generation complete: re-enable the "Translate" button
//           setDisabled(false);
//           break;
//       }
//     };

//     // Attach the callback function as an event listener.
//     worker.current.addEventListener("message", onMessageReceived);

//     // Define a cleanup function for when the component is unmounted.
//     return () => {
//       if (worker.current) {
//         worker.current.removeEventListener("message", onMessageReceived);
//       }
//     };
//   });
//   return (
//     <div className="flex w-full flex-col bg-french-porcelain">
//       <h1>Transformer</h1>

//       <div>
//         <form>
//           <input
//             type="text"
//             placeholder="Enter text to transform"
//           />
//         </form>
//       </div>
//     </div>
//   );
// }
